<style>
  .layui-form-label.required:before {
    /* 这种写法也可以*/
    content: ' *';
    color: red;
  }
  .open-form .layui-form-label {
    width: 110px;
  }
  .open-form .layui-input-block {
    margin-left: 140px;
  }
</style>

<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="proTaskZYForm" class="layui-form proTaskZYForm open-form">
  <div class="open-model">
    <div class="open-auto">
      <fieldset class="layui-elem-field layui-field-title">
        <legend>产品信息</legend>
      </fieldset>
      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label required">来源：</label>
          <div class="layui-input-block">
            <input name="source" disabled type="text" class="layui-input" required autocomplete="off" value="自研产品" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label">产品类别：</label>
          <div class="layui-input-block">
            <input name="productTypeName" disabled type="text" class="layui-input" lay-verify="required" />
            <input id="productTypeId" name="productTypeId" type="hidden" value="' + d.proTypeId + '" lay-verify="required" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label">产品性质：</label>
          <div class="layui-input-block">
            <input name="productNatureName" disabled type="text" class="layui-input" lay-verify="required" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label required">产品属性：</label>
          <div class="layui-input-block">
            <input name="assemblyNature" disabled type="text" class="layui-input" lay-verify="required" />
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label">内部SKU号：</label>
          <div class="layui-input-block" id="SkuInfo">
            <input id="productDetailId" name="productDetailId" type="hidden" />
            <input id="inSkuCode" name="inSkuCode" disabled type="text" class="layui-input" lay-verify="required" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label">内部SKU名称：</label>
          <div class="layui-input-block">
            <input type="text" id="inSkuName" disabled name="inSkuName" class="layui-input" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label">内部规格码：</label>
          <div class="layui-input-block">
            <input type="text" id="inSkuSpec" disabled name="inSkuSpec" class="layui-input" />
          </div>
        </div>
        <!--        <div class="layui-col-md3">-->
        <!--            <label class="layui-form-label">计量单位：</label>-->
        <!--            <div class="layui-input-block">-->
        <!--                <input name="inSkuUnitName" disabled type="text" class="layui-input"-->
        <!--                       lay-verify="required"/>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-col-md3">
          <label class="layui-form-label">基础单位：</label>
          <div class="layui-input-block">
            <input name="inUnitName" disabled type="text" class="layui-input" lay-verify="required" />
          </div>
        </div>
      </div>

      <div class="layui-form-item layui-row">
        <!--        <div class="layui-col-md3">-->
        <!--            <label class="layui-form-label">基础单位数量：</label>-->
        <!--            <div class="layui-input-block">-->
        <!--                <input type="text" disabled id="inUnitCount" name="inUnitCount" class="layui-input">-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-col-md3">
          <label class="layui-form-label required">计量方式(主)：</label>
          <div class="layui-input-block">
            <input type="text" id="mainCalWayName" name="mainCalWayName" class="layui-input" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label required">包装单位(主)：</label>
          <div class="layui-input-block">
            <input type="text" id="mainUnitName" name="mainUnitName" class="layui-input" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label required">换算率(主)：</label>
          <div class="layui-input-block">
            <input type="text" id="mainUnitRate" name="mainUnitRate" class="layui-input" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label">计量方式(辅)：</label>
          <div class="layui-input-block">
            <input type="text" id="subCalWayName" name="subCalWayName" class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label">计量单位(辅)：</label>
          <div class="layui-input-block">
            <input type="text" id="subUnitName" name="subUnitName" class="layui-input" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label">换算率(辅)：</label>
          <div class="layui-input-block">
            <input type="text" id="subUnitRate" name="subUnitRate" class="layui-input" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label">成本核算类型：</label>
          <div class="layui-input-block">
            <select id="costCheckType" disabled name="costCheckType" lay-filter="costCheckType" class="layui-input borderNone"></select>
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label">是否质检：</label>
          <div class="layui-input-block">
            <select id="checkStatus" disabled name="checkStatus" lay-filter="checkStatus" class="layui-input borderNone"></select>
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label">是否料箱管理：</label>
          <div class="layui-input-block">
            <select id="boxStatus" disabled name="boxStatus" lay-filter="boxStatus" class="layui-input borderNone"></select>
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label">说明：</label>
          <div class="layui-input-block">
            <input type="text" id="inRemark" name="inRemark" class="layui-input" />
          </div>
        </div>
      </div>
      <fieldset class="layui-elem-field layui-field-title">
        <legend>其他信息</legend>
      </fieldset>
      <div class="layui-form-item layui-row">
        <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
          <ul class="layui-tab-title">
            <li class="layui-this" lay-id="YSBZ">产品验收标准</li>
            <li lay-id="BOMGUIHUA">MRP物料BOM规划</li>
            <li lay-id="GCGUIHUA">产品工程规划</li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <div class="layui-form-item layui-row">
                <label class="layui-form-label">版本编号：</label>
                <input style="border: none" type="text" value="BCZ380C9.2.1.4.1.1.1-2" disabled id="infoVersion" name="infoVersion" class="layui-input" />
              </div>
              <div class="layui-form-item layui-row">
                <div class="layui-col-md5">
                  <div id="TuZhiPdf" style="height: 100%; margin-left: 10px"></div>
                </div>
                <div class="layui-col-md7">
                  <div class="layui-form-item layui-row">
                    <table class="layui-table" id="testItemTable" lay-filter="testItemTable"></table>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-tab-item" id="bom_info">
              <div class="layui-form-item layui-row">
                <div class="layui-form-item layui-row">
                  <table class="layui-table" id="bomTreeTableInfo" lay-filter="bomTreeTableInfo"></table>
                </div>
              </div>
            </div>
            <div class="layui-tab-item" id="gy">
              <!-- <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                  <label class="layui-form-label">选择主材：</label>
                  <div class="layui-input-block">
                    <select id="mainSkuId" lay-search="" name="mainSkuId" lay-filter="mainSkuId" class="common-select-search"></select>
                  </div>
                </div>
              </div> -->
              <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                  <label class="layui-form-label">选择工艺路线：</label>
                  <div class="layui-input-block">
                    <select id="processLineTemplate" lay-search="" name="processLineTemplate" lay-filter="processLineTemplate" class="common-select-search"></select>
                  </div>
                </div>
              </div>
              <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                  <label class="layui-form-label">关联模具图纸：</label>
                  <div class="layui-input-block">
                    <select id="isRelevance" name="isRelevance" lay-filter="isRelevance" class="common-select-search">
                      <option value="0">不关联</option>
                      <option value="1">关联模具图纸</option>
                    </select>
                  </div>
                </div>
                <div class="layui-col-md9" id="moldUploadInfo">
                  <div class="layui-col-md4">
                    <label class="layui-form-label">模具图纸：</label>
                    <div class="layui-input-block">
                      <div id="fileUploadMoldBtn" class="layui-btn" style="float: left; margin-left: 3px">
                        <i class="layui-icon">&#xe681;</i>
                        上传文件
                      </div>
                      <br />
                      <div id="addMoldHeaderPdf" style="margin-top: -16px" class="companyFormPhotos"></div>
                      <input name="attachmentMoldPdf" id="attachmentMoldPdf" type="hidden" class="layui-input" />
                    </div>
                  </div>
                  <div class="layui-col-md7">
                    <label class="layui-form-label">模具图纸备注：</label>
                    <div class="layui-input-block">
                      <textarea id="moldRemark" name="moldRemark" placeholder="模具图纸备注" class="layui-textarea" autocomplete="off" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-form-item layui-row">
                <table class="layui-table" id="productProjectTable" lay-filter="productProjectTable"></table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
    </div>
  </div>
</form>

<script type="text/html" id="viewAttachmentHtml">
  <div id="example1" style="height: 100%;"></div>
</script>

<!-- js部分 -->
<script>
  layui.use(['layer', 'form', 'tableTreeDj', 'table', 'laydate', 'admin', 'laytpl', 'upload', 'config'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var config = layui.config;
    var upload = layui.upload;
    var table = layui.table;
    var admin = layui.admin;
    var form = layui.form;
    var laydate = layui.laydate;
    var tableTree = layui.tableTreeDj;

    let projectTableData = [];
    //初始化data
    let testItemData = [];
    let moldName = '';
    let fileName = '';
    let tzId;
    let tzVersion;
    let data = admin.getTempData('resProTaskZYData');
    let bom_tab = document.querySelector('.layui-tab-title li:nth-child(2)');
    let bom_content = document.querySelector('.layui-tab-content .layui-tab-item:nth-child(2)');
    let gx_tab = document.querySelector('.layui-tab-title li:nth-child(3)');
    let gx_content = document.querySelector('.layui-tab-content .layui-tab-item:nth-child(3)');

    laydate.render({
      elem: '#planGivenTime',
      type: 'datetime',
    });

    /**
     * 初始化任务详情
     */
    admin.req('enterprise/res/admin/planning/proTask/detail/' + data.id, {}, function (res) {
      if (res.code == 200) {
        let dataValue = res.data === undefined ? null : res.data;
        if (dataValue.processProjectData.length > 0) {
          dataValue.processLineTemplate = dataValue.processProjectData[0].templateId;
        }
        form.val('proTaskZYForm', dataValue);
        admin.initDataSelect('enterprise/product/admin/processLineTemplate/list?page=1&limit=999', {}, 'processLineTemplate', dataValue.processLineTemplate ? dataValue.processLineTemplate : null, '模板', 'name', 'id');
        admin.getDictList('costCheckType', 'product_detail_cost_check_type', res.data.costCheckType === null ? null : res.data.costCheckType, '成本核算');
        admin.getDictList('checkStatus', 'sys_yes_no', res.data.checkStatus === null ? null : res.data.checkStatus, '是否质检');
        admin.getDictList('boxStatus', 'sys_yes_no', res.data.boxStatus === null ? null : res.data.boxStatus, '是否料箱管理');

        projectTableData = res.data.processProjectData;
        testItemData = res.data.testItemData;
        if (res.data.drawInfo) {
          tzId = res.data.drawInfo.id;
          tzVersion = res.data.drawInfo.versionName;
        }
        let name = res.data.cusProductFigure;
        let imagUrl = '';
        //初始化文件
        $('#addHeaderPdf').html('<div class="attachments">' + '<div><img name="attachments" style="max-width: 620px" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + name + '</span></div></div>');
        $('#attachmentPdf').val(res.data.attachmentPdfUrl);
        imagUrl = res.data.attachmentPdfUrl;
        $('#fileName').text(res.data.cusProductFigure);
        $('.attachments').click(function () {
          let json = {};
          json.attachment = imagUrl;
          showViewAttachmentModel(json);
        });
        if (imagUrl && imagUrl.indexOf('.pdf') !== -1) {
          PDFObject.embed(imagUrl, '#TuZhiPdf');
        } else {
          let attachmentHtml = '';
          imagUrl.split(',').forEach((attachmentUrl, index) => {
            attachmentHtml += '<div><div><img style="max-width: 620px" src="' + attachmentUrl + '"></div></div>';
          });
          $('#TuZhiPdf').html(attachmentHtml);
        }
        //默认隐藏
        if (res.data.drawInfo) {
          let drawInfos = res.data.drawInfo;
          if (res.data.drawInfo.isRelevance === '1') {
            $('#moldUploadInfo').show();
            $('#addMoldHeaderPdf').html('<div class="moldAttachments">' + '<div><img name="moldAttachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + res.data.drawInfo.moldDrawInfo.name + '</span></div></div>');
            $('#attachmentMoldPdf').val(res.data.drawInfo.moldDrawInfo.fileUrl);
            $('#moldRemark').val(res.data.drawInfo.moldDrawInfo.remark);
            moldName = res.data.drawInfo.moldDrawInfo.name;
            $('.moldAttachments').click(function () {
              let json = {};
              json.attachment = res.data.drawInfo.moldDrawInfo.fileUrl;
              showViewAttachmentModel(json);
            });
          } else {
            $('#moldUploadInfo').hide();
          }
          $('#isRelevance').val(res.data.drawInfo.isRelevance);
          admin.initDataSelectAndMap('enterprise/product/admin/productDetailWMS/list', { categoryType: 'production', limit: 9999 }, 'mainSkuId', drawInfos.mainSkuId == null ? null : drawInfos.mainSkuId, 'SKU物料', 'codeAndName', null, null);
        } else {
          $('#moldUploadInfo').hide();
        }

        //初始化工序productProjectTable
        table.render({
          elem: '#productProjectTable',
          data: projectTableData,
          id: 'productProjectTable',
          limit: 9999,
          cols: [
            [
              { type: 'numbers', title: '序号' },
              {
                field: 'name',
                align: 'center',
                title: '工序名称',
                width: '10%',
              },
              { field: 'proCode', sort: true, title: '产品工序编码' },
              { field: 'sorted', sort: true, title: '工序排序' },
              { field: 'content', sort: true, title: '工序工艺要求' },
              { field: 'fixture', sort: true, title: '夹具' },
              { field: 'measuringTools', sort: true, title: '量具' },
              { field: 'hoursQuota', sort: true, title: '工时定额(分钟)' },
              { field: 'salaryQuota', sort: true, title: '工资定额(元)' },
              { field: 'productDetailId', sort: true, title: '成品料号' },
            //   { field: 'qualityParam', sort: true, title: '工序质检要求' },
              // , {field: 'skuGetCode', edit: 'text', sort: true, title: '领料料号'}
            ],
          ],
        });

        //如果为空查询关联的
        if (Array.isArray(testItemData) && testItemData.length === 0) {
          admin.req('enterprise/product/admin/productItem/listByType', { productType: res.data.productTypeId }, function (res) {
            if (res.code == 200) {
              testItemData = res.data;
            }
            //初始化质检标准表
            table.render({
              elem: '#testItemTable',
              data: testItemData,
              id: 'testItemTable',
              limit: 9999,
              cols: [
                [
                  { type: 'numbers', title: '序号' },
                  {
                    field: 'name',
                    align: 'center',
                    title: '检查项',
                  },
                  { field: 'standard', sort: true, title: '标准' },
                  { field: 'utensil', sort: true, title: '器具' },
                  { field: 'way', sort: true, title: '方法' },
                  { field: 'importance', sort: true, title: '重要程度' },
                  { field: 'detectionRate', sort: true, title: '检测率' },
                ],
              ],
            });
          });
        } else {
          //初始化质检标准表
          table.render({
            elem: '#testItemTable',
            data: testItemData,
            id: 'testItemTable',
            limit: 9999,
            cols: [
              [
                { type: 'numbers', title: '序号' },
                {
                  field: 'name',
                  align: 'center',
                  title: '检查项',
                },
                { field: 'standard', sort: true, title: '标准' },
                { field: 'utensil', sort: true, title: '器具' },
                { field: 'way', sort: true, title: '方法' },
                { field: 'importance', sort: true, title: '重要程度' },
                { field: 'detectionRate', sort: true, title: '检测率' },
              ],
            ],
          });
        }

        //初始化 bom
        // 渲染表格
        tableTree.render(
          {
            id: '#bomTreeTableInfo',
            elem: '#bomTreeTableInfo',
            url: config.base + 'enterprise/res/admin/planning/proBom/bomTree/' + data.productDetailId,
            page: false,
            cellMinWidth: 100,
            where: { limit: 9999 },
            cols: [
              [
                { type: 'numbers', title: '序号', fixed: 'left' },
                { field: 'productName', sort: true, title: 'BOM产品名称' },
                { field: 'productCode', sort: true, title: '产品编号' },
                { field: 'productSpec', sort: true, title: '规格码' },
                { field: 'productTypeName', sort: true, title: '物资类别' },
                { field: 'assemblyNatureName', sort: true, title: '产品性质' },
                { field: 'inSkuUnitName', sort: true, title: '计量单位', width: 90 },
                { field: 'inUnitCount', sort: true, title: '需求数', width: 80 },
                { field: 'remark', sort: true, title: '描述' },
              ],
            ],
          },
          { keyPid: 'parentId', title: 'productName' },
        );

        form.render(); //菜单渲染 把内容加载进去
      } else {
        layer.msg(res.msg, { icon: 2 });
      }
    });

    //如果产品属性是加工件 就只有工序
    // if (data.assemblyNatureId === '3') {
    //   bom_tab.style.display = 'none';
    //   bom_content.style.display = 'none';
    //   //加载工序模板
    // //   admin.initDataSelect('enterprise/product/admin/processLineTemplate/list?page=1&limit=999', null, 'processLineTemplate', null, '模板', 'name', 'id');
    // } else {
    //   gx_tab.style.display = 'none';
    //   gx_content.style.display = 'none';
    // }

    // 上传附件-pdf
    upload.render({
      elem: '#fileUploadMoldBtn',
      url: config.upload_url + 'uploadFile',
      data: {},
      accept: 'file',
      exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx',
      headers: { Authorization: 'Bearer ' + config.getToken() },
      done: function (res) {
        if (res.code == 200) {
          layer.msg(res.msg || '上传成功', { icon: 1 });
          let imagUrl = res.data.url;
          moldName = res.data.fileName;
          fileName = res.data.fileName;
          $('#addMoldHeaderPdf').html('<div class="moldAttachments">' + '<div><img name="moldAttachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + moldName + '</span></div></div>');
          $('#attachmentMoldPdf').val(imagUrl);

          $('.moldAttachments').click(function () {
            let json = {};
            json.attachment = imagUrl;
            showViewAttachmentModel(json);
          });
        } else if (res.code == 502) {
          return location.replace('admin/login.html');
        } else {
          layer.msg(res.msg || '上传失败', { icon: 2 });
        }
      },
    });

    // 查看附件
    function showViewAttachmentModel(data) {
      admin.open({
        type: 1,
        area: ['60%', '80%'],
        offset: '65px',
        title: '查看附件',
        content: $('#viewAttachmentHtml').html(),
        success: function () {
          if (data.attachment && data.attachment.indexOf('.pdf') !== -1) {
            PDFObject.embed(data.attachment, '#example1');
          } else {
            var attachmentHtml = '';
            data.attachment.split(',').forEach((attachmentUrl, index) => {
              attachmentHtml += '<div><div><img style="max-width: 620px" src="' + attachmentUrl + '"></div></div>';
            });
            $('#example1').html(attachmentHtml);
          }
        },
      });
    }
  });
</script>
